<template>
  <div class="redu_root">
    <div class="redu_step">
      <el-steps :active="stepActive">
        <el-step title="基本信息" description="配置活动的基本信息"></el-step>
        <el-step title="生效条件" description="活动需要用到的条件"></el-step>
        <el-step title="限制条件" description="对活动所有限制的条件"></el-step>
      </el-steps>
    </div>
    <div class="step_one step_form" v-show="stepActive === 1">
      <el-form
        :model="stepOneData"
        :rules="stepOneRule"
        ref="ruleForm1"
        label-width="100px"
        class="form-com-css"
      >
        <el-form-item label="活动名称" prop="activityName">
          <el-input v-model="stepOneData.activityName"></el-input>
        </el-form-item>
        <el-form-item label="活动用途" prop="activityUse">
          <el-radio v-model="stepOneData.activityUse" label="CSP"
            >消费</el-radio
          >
          <br />
          <el-radio v-model="stepOneData.activityUse" label="RCH"
            >充值</el-radio
          >
          <br />
          <el-radio v-model="stepOneData.activityUse" label="LABEl"
            >标签</el-radio
          >
        </el-form-item>
        <el-form-item label="活动类型" prop="activityType">
          <el-radio v-model="stepOneData.activityType" label="RFA"
            >按固定金额</el-radio
          >
          <br />
          <el-radio v-model="stepOneData.activityType" label="LOR"
            >按固定数量</el-radio
          >
          <div class="disflx one-alert">
            <el-radio v-model="stepOneData.activityType" label="AAL"
              >每升立减</el-radio
            >
            <br />
            <el-alert
              class="alert-style"
              title="订单金额/油机价=升数，然后在对升数立减。支持阶梯"
              type="info"
              show-icon
            >
            </el-alert>
          </div>
        </el-form-item>
        <el-form-item label="活动方式" prop="activityMode">
          <el-radio v-model="stepOneData.activityMode" label="FAD"
            >定额立减</el-radio
          >
          <br />
          <el-radio v-model="stepOneData.activityMode" label="PAR"
            >百分比立减</el-radio
          >
          <br />
          <el-radio v-model="stepOneData.activityMode" label="RDD"
            >随机立减</el-radio
          >
        </el-form-item>
        <el-form-item class="nolable">
          <el-button @click="abortEdit">取消</el-button>
          <el-button type="primary" @click="oneNextEvent"
            >保存并下一步</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="step_two step_form" v-show="stepActive === 2">
      <el-form
        :model="stepTwoData"
        :rules="stepTwoRules"
        ref="ruleForm2"
        class="form-com-css"
      >
        <el-form-item prop="selectStationList">
          <div class="t">参与活动油站/商户</div>
          <div>
            <el-button type="primary" @click="getStationList"
              >关联加油站</el-button
            >
          </div>
          <div>
            <el-table border :data="selectStationList" class="tableStyle">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="stationName" label="油站名称">
              </el-table-column>
              <el-table-column prop="h" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    @click="delRowEvent('selectStationList', scope.$index)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

        <el-form-item prop="youplist">
          <div class="t">参与活动油品</div>
          <div>
            <!-- <el-button :type="stepTwoData.oilPartOrAll?'primary':''" @click="()=>{stepTwoData.oilPartOrAll=true;}">全部油品</el-button> -->
            <el-button type="primary" @click="showOilOpen">添加油品</el-button>
          </div>
          <div>
            <el-table border :data="selectOilList" class="tableStyle">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="oilName" label="油品名称">
              </el-table-column>
              <el-table-column prop="h" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    @click="delRowEvent('selectOilList', scope.$index)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

        <el-form-item prop="stepTwoData">
          <div class="t">参与活动车主</div>
          <div>
            <el-radio v-model="stepTwoData.memberCondition" label="all"
              >全选</el-radio
            >
            <el-radio v-model="stepTwoData.memberCondition" label="part"
              >指定</el-radio
            >
          </div>
          <div>
            <el-radio
              v-model="stepTwoData.memberLevel"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="1"
              >普卡</el-radio
            >
            <el-radio
              v-model="stepTwoData.memberLevel"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="2"
              >银卡</el-radio
            >
            <el-radio
              v-model="stepTwoData.memberLevel"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="3"
              >金卡</el-radio
            >
            <el-radio
              v-model="stepTwoData.memberLevel"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="4"
              >钻卡</el-radio
            >
            <el-radio
              v-model="stepTwoData.memberLevel"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="5"
              >黑卡</el-radio
            >
            <!-- 车队卡暂时还没有 -->
            <!-- <el-radio
              v-model="stepTwoData.memberLevel"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="6"
            >
              车队卡
            </el-radio> -->
          </div>
          <div>
            <el-radio
              v-model="stepTwoData.paymentMethod"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="wx"
              >微信</el-radio
            >
            <el-radio
              v-model="stepTwoData.paymentMethod"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="zfb"
              >支付宝</el-radio
            >
            <!--
            <el-radio v-model="stepTwoData.paymentMethod" :disabled="stepTwoData.memberCondition == 'all'" label="dzk">会员卡</el-radio>
            <el-radio v-model="stepTwoData.paymentMethod" :disabled="stepTwoData.memberCondition == 'all'" label="xj">现金</el-radio>
            <el-radio v-model="stepTwoData.paymentMethod" :disabled="stepTwoData.memberCondition == 'all'" label="yl">刷卡</el-radio>
            -->
          </div>
          <div>
            <el-radio
              v-model="stepTwoData.memberTags"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="newUser"
              >老用户</el-radio
            >
            <el-radio
              v-model="stepTwoData.memberTags"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="oldUser"
              >新用户</el-radio
            >
            <el-radio
              v-model="stepTwoData.memberTags"
              :disabled="stepTwoData.memberCondition == 'all'"
              label="super"
              >超级会员</el-radio
            >
          </div>
        </el-form-item>

        <!-- 车队列表 ，选择车队卡选项时才会展示 -->
        <el-form-item
          prop="teamcardlist"
          v-show="stepTwoData.memberLevel === '6'"
        >
          <div class="t">选择车队</div>
          <div>
            <el-button type="primary" @click="gotoAddTeam">添加车队</el-button>
          </div>
          <div>
            <el-table border :data="selectTeamCardList" class="tableStyle">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="fleetname" label="车队名称">
              </el-table-column>
              <el-table-column prop="cardNumber" label="主卡号">
              </el-table-column>
              <el-table-column prop="h" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button @click="" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

        <el-form-item prop="startdate">
          <div class="t">活动开始时间</div>
          <div @click="getStartTime">
            <el-radio v-model="stepTwoData.isimm" label="isimm"
              >立即执行</el-radio
            >
          </div>
          <div class="date-css">
            <el-date-picker
              popper-class="date-style"
              v-model="stepTwoData.startdate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item prop="enddate">
          <div class="t">活动结束时间</div>
          <div class="date-css">
            <el-date-picker
              popper-class="date-style"
              v-model="stepTwoData.enddate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item prop="maxCount">
          <div class="t">最大参与次数</div>
          <el-input v-model="stepTwoData.maxCount"></el-input>
          <div class="tip">
            单个用户在活动时间内最多能享受几次，0为不限制次数
          </div>
        </el-form-item>

        <el-form-item class="nolable" style="padding: 20px">
          <el-button @click="backPreEvent">返回上一步</el-button>
          <el-button type="primary" @click="oneNextEvent"
            >保存并下一步</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="step_form step_two step_three" v-show="stepActive === 3">
      <el-form
        :model="stepThreeData"
        :rules="stepThreeDataRules"
        ref="ruleForm3"
        class="form-com-css"
      >
        <el-form-item class="three-one">
          <el-alert
            class="alert-style"
            title="请根据以下条件设置活动金额"
            type="info"
            show-icon
          >
          </el-alert>
          <div class="t-top-tip">
            <p class="t">
              活动用途<i>{{ activityUse[stepOneData.activityUse] }}</i>
            </p>
            <p class="t">
              活动类型<i>{{ activityType[stepOneData.activityType] }}</i>
            </p>
            <p class="t">
              活动方式<i>{{ activityMode[stepOneData.activityMode] }}</i>
            </p>
          </div>
        </el-form-item>
        <el-form-item prop="younplist">
          <div class="t">参与活动商品选择</div>
          <div>
            <el-button :type="stepTwoData.oilPartOrAll ? 'primary' : ''"
              >全部商品</el-button
            >
            <el-button :type="stepTwoData.oilPartOrAll ? '' : 'primary'"
              >单个商品</el-button
            >
          </div>
          <div class="three-list" v-if="stepOneData.activityMode != 'RDD'">
            <div class="three-list" v-if="stepTwoData.oilPartOrAll">
              <el-row
                type="flex"
                class="row-bg"
                v-for="(rule, i) in rules"
                :key="i"
              >
                <el-col :span="2"><el-button>满</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="rule.full" style="width: 90%"></el-input
                  >{{ fullUnit[stepOneData.activityType] }}</el-col
                >
                <el-col :span="2" :offset="1"><el-button>减</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="rule.cut" style="width: 90%"></el-input
                  >{{ cutUnit[stepOneData.activityMode] }}</el-col
                >
                <template v-if="i == 0">
                  <el-col :span="4" :offset="1"
                    ><el-button
                      @click="addRulesListEvent('rules', i)"
                      type="primary"
                      >添加</el-button
                    ></el-col
                  >
                </template>
                <template v-else>
                  <el-col :span="4" :offset="1"
                    ><el-button
                      @click="reduceListEvent(rules, i)"
                      type="primary"
                      >删除</el-button
                    ></el-col
                  >
                </template>
              </el-row>
            </div>
            <div class="three-list" v-else>
              <div v-for="(oil, index) in selectOilList" :key="index">
                <div class="disflx oilNameDiv">
                  <div>
                    油品名称：<b>{{ oil.oilName }}</b>
                  </div>
                </div>
                <el-row
                  type="flex"
                  class="row-bg"
                  v-for="(rule, i) in oil.rules"
                  :key="i"
                >
                  <!-- <el-col v-if="stepOneData.activityType !== 'AAL'" :span="2"><el-button>满</el-button></el-col>
                  <el-col v-if="stepOneData.activityType !== 'AAL'" :span="7"><el-input v-model="rule.full"
                      style="width: 90%"></el-input>{{ fullUnit[stepOneData.activityType] }}</el-col> -->
                  <el-col :span="7">
                    <span>消费满</span>
                    <el-input
                      v-model="rule.full"
                      style="width: 60% !important; margin: 0 10px"
                    />
                    <span>{{ fullUnit[stepOneData.activityType] }}时</span>
                  </el-col>
                  <el-col
                    :span="3"
                    :offset="stepOneData.activityType !== 'AAL' ? 1 : 0"
                  >
                    <span>
                      {{
                        (stepOneData.activityType == "RFA" ? "减" : "") +
                        (stepOneData.activityType == "LOR" ? "减" : "") +
                        (stepOneData.activityType == "AAL" ? "每升价格减" : "")
                      }}
                    </span>
                  </el-col>
                  <el-col :span="7"
                    ><el-input v-model="rule.cut" style="width: 90%"></el-input
                    >{{ cutUnit[stepOneData.activityMode] }}</el-col
                  >
                  <el-col :span="4" :offset="1"
                    ><el-button
                      @click="reduceListEvent(oil.rules, i)"
                      type="primary"
                      v-if="i > 0"
                      >删除</el-button
                    ></el-col
                  >
                  <el-col
                    v-if="selectOilList[index].rules.length === i + 1"
                    :span="4"
                    ><el-button
                      @click="addListEvent('selectOilList', index, i)"
                      type="primary"
                      >添加</el-button
                    ></el-col
                  >
                  <el-col v-else :span="4" />
                </el-row>
              </div>
            </div>
          </div>
          <!--          随机立减开始 -->
          <div class="three-list" v-else>
            <div class="three-list" v-if="stepTwoData.oilPartOrAll">
              <el-row type="flex" class="row-bg">
                <el-col :span="2"><el-button>预算</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="stepThreeData.budget"></el-input
                ></el-col>
              </el-row>
              <el-row
                type="flex"
                class="row-bg"
                v-for="(rule, i) in rules"
                :key="i"
              >
                <el-col :span="2"><el-button>订单金额</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="rule.full" style="width: 90%"></el-input
                  >{{ fullUnit[stepOneData.activityType] }}</el-col
                >
                <el-col :span="2" :offset="1"
                  ><el-button>解价区间</el-button></el-col
                >
                <el-col :span="7"
                  ><el-input v-model="rule.cutMin" style="width: 90%"></el-input
                  >{{ cutUnit[stepOneData.activityMode] }}</el-col
                >
                <el-col :span="2" :offset="1"><el-button>-</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="rule.cutMax" style="width: 90%"></el-input
                  >{{ cutUnit[stepOneData.activityMode] }}</el-col
                >
                <template v-if="i == 0">
                  <el-col :span="4" :offset="1"
                    ><el-button
                      @click="addRulesListEvent('rules')"
                      type="primary"
                      >添加</el-button
                    ></el-col
                  >
                </template>
                <template v-else>
                  <el-col :span="4" :offset="1"
                    ><el-button
                      @click="reduceListEvent(rules, i)"
                      type="primary"
                      >删除</el-button
                    ></el-col
                  >
                </template>
              </el-row>
            </div>
            <div class="three-list" v-else>
              <el-row type="flex" class="row-bg">
                <el-col :span="2"><el-button>预算</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="stepThreeData.budget"></el-input
                ></el-col>
              </el-row>
              <div v-for="(oil, index) in selectOilList" :key="index">
                <div class="disflx oilNameDiv">
                  <div>
                    油品名称：<b>{{ oil.oilName }}</b>
                  </div>
                  <!-- <div><el-button @click="addListEvent('selectOilList', index)" type="primary">添1加</el-button></div> -->
                </div>
                <el-row
                  type="flex"
                  class="row-bg"
                  v-for="(rule, i) in oil.rules"
                  :key="i"
                >
                  <el-col :span="2"><el-button>订单金额</el-button></el-col>
                  <el-col :span="7"
                    ><el-input v-model="rule.full" style="width: 90%"></el-input
                    >{{ fullUnit[stepOneData.activityType] }}</el-col
                  >
                  <el-col :span="2" :offset="1"
                    ><el-button>解价区间</el-button></el-col
                  >
                  <el-col :span="7"
                    ><el-input
                      v-model="rule.cutMin"
                      style="width: 90%"
                    ></el-input
                    >{{ cutUnit[stepOneData.activityMode] }}</el-col
                  >
                  <el-col :span="2" :offset="1"
                    ><el-button>-</el-button></el-col
                  >
                  <el-col :span="7"
                    ><el-input
                      v-model="rule.cutMax"
                      style="width: 90%"
                    ></el-input
                    >{{ cutUnit[stepOneData.activityMode] }}</el-col
                  >
                  <el-col :span="4" :offset="1"
                    ><el-button
                      @click="reduceListEvent(oil.rules, i)"
                      type="primary"
                      v-if="i > 0"
                      >删除</el-button
                    ></el-col
                  >
                  <el-col
                    :span="4"
                    :offset="1"
                    v-if="selectOilList[index].rules.length === i + 1"
                    ><el-button
                      @click="addListEvent('selectOilList', index, i)"
                      type="primary"
                      >添加</el-button
                    ></el-col
                  >
                  <el-col :span="4" :offset="1" v-else />
                </el-row>
              </div>
            </div>
          </div>
          <!--          随机立减结束 -->
        </el-form-item>

        <el-form-item prop="timeModes">
          <p class="t">
            生效时段
            <el-checkbox-group
              v-model="stepThreeData.timeModes"
              @change="changeTimeMode"
            >
              <el-checkbox
                class="block"
                label="all"
                :disabled="
                  stepThreeData.timeModes.includes('week') ||
                  stepThreeData.timeModes.includes('month')
                "
                >全部时段</el-checkbox
              >
              <el-checkbox
                class="block"
                label="week"
                :disabled="stepThreeData.timeModes.includes('all')"
              >
                按周选择
                <div
                  style="padding: 20px; display: inline-block"
                  v-show="stepThreeData.timeModes.includes('week')"
                >
                  <el-checkbox-group
                    v-model="stepThreeData.weeks"
                    size="medium"
                  >
                    <el-checkbox-button
                      v-for="day in daysOfWeek"
                      :label="day"
                      :key="day"
                      >{{ day }}</el-checkbox-button
                    >
                  </el-checkbox-group>
                </div>
              </el-checkbox>
              <el-checkbox
                class="block"
                label="month"
                :disabled="stepThreeData.timeModes.includes('all')"
              >
                按月选择
                <div
                  style="padding: 20px; display: inline-block"
                  v-show="stepThreeData.timeModes.includes('month')"
                >
                  <el-checkbox-group v-model="stepThreeData.days" size="medium">
                    <el-checkbox-button
                      v-for="day in daysOfMonth"
                      :label="day"
                      :key="day"
                      >{{ day }}</el-checkbox-button
                    >
                  </el-checkbox-group>
                  <el-checkbox-group v-model="stepThreeData.days" size="medium">
                    <el-checkbox-button
                      v-for="day in daysOfMonth2"
                      :label="day"
                      :key="day"
                      >{{ day }}</el-checkbox-button
                    >
                  </el-checkbox-group>
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </p>
        </el-form-item>
        <el-form-item>
          <div class="disflx mt12">
            <p class="t">优惠券互斥</p>
            <el-alert
              class="alert-style"
              title="配置活动是否存在和优惠劵互斥的限制"
              type="info"
              show-icon
            >
            </el-alert>
          </div>
          <div>
            <el-radio v-model="stepThreeData.activityRule" label="1"
              >使用本活动时，用户可用优惠劵</el-radio
            >
            <br />
            <el-radio v-model="stepThreeData.activityRule" label="2"
              >使用本活动时，用户不可用优惠券</el-radio
            >
          </div>
        </el-form-item>
        <el-form-item>
          <div class="disflx mt12">
            <p class="t">电子卡互斥</p>
            <el-alert
              class="alert-style"
              title="配置活动是否存在和电子卡互斥的限制"
              type="info"
              show-icon
            >
            </el-alert>
          </div>
          <div>
            <el-radio v-model="stepThreeData.cardFlag" label="0"
              >使用本活动时，用户都可用</el-radio
            >
            <br />
            <el-radio v-model="stepThreeData.cardFlag" label="1"
              >使用本活动时，仅限微信支付</el-radio
            >
            <br />
            <el-radio v-model="stepThreeData.cardFlag" label="2"
              >使用本活动时，仅限电子卡支付</el-radio
            >
          </div>
        </el-form-item>
        <el-form-item>
          <div class="t">防作弊设置</div>
          <div>
            <div class="disflx three-b">
              <el-radio v-model="stepThreeData.antiCheating" label="1"
                >开启防作弊</el-radio
              >
              <el-alert
                class="alert-style"
                title="开启后，同一ID一个自然天只能使用一次"
                type="info"
                show-icon
              >
              </el-alert>
            </div>
            <div class="disflx three-b">
              <el-radio v-model="stepThreeData.antiCheating" label="0"
                >自定义次数</el-radio
              >
              <el-input
                :disabled="stepThreeData.antiCheating != 0"
                v-model="stepThreeData.countOfDay"
              ></el-input>
            </div>
          </div>
        </el-form-item>

        <el-form-item class="nolable" style="padding: 20px">
          <el-button @click="backPreEvent">返回上一步</el-button>
          <el-button
            type="primary"
            @click="submitForm"
            :disabled="this.$route.query.activeStatus == 1"
            >保存并提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!--弹框-->
    <el-dialog
      :title="'添加油品'"
      :visible.sync="oilOpen"
      width="800px"
      append-to-body
    >
      <el-table
        :data="oilList"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionOilChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="oilName" label="品名" align="left">
        </el-table-column>
        <el-table-column prop="oilClass" label="类型" align="left">
        </el-table-column>
        <el-table-column prop="oilType" label="型号" align="left">
        </el-table-column>
        <el-table-column prop="unitCode" label="单位" align="left">
          <template slot-scope="scope">
            {{ scope.row.unitCode == "1" ? "(L/kg)" : "" }}
            {{ scope.row.unitCode == "2" ? "千克" : "" }}
            {{ scope.row.unitCode == "3" ? "公斤" : "" }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
    <el-dialog
      :title="'添加油站'"
      :visible.sync="stationOpen"
      width="850px"
      append-to-body
    >
      <el-table
        :data="stationList"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionStationChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <af-table-column prop="stationName" label="油站名称" align="left">
        </af-table-column>
        <af-table-column prop="stationCode" label="油站编码" align="left">
        </af-table-column>
        <!--
        <af-table-column
          prop="isAlipayFlag"
          label="是否启用支付宝"
          align="left"
        >
          <template slot-scope="scope">
            {{ scope.row.isAlipayFlag == "0" ? "关闭" : "" }}
            {{ scope.row.isAlipayFlag == "1" ? "启动" : "" }}
          </template>
        </af-table-column>
        -->
        <af-table-column prop="status" label="油站状态" align="left">
          <template slot-scope="scope">
            {{ scope.row.status == "0" ? "停用" : "" }}
            {{ scope.row.status == "1" ? "启用" : "" }}
          </template>
        </af-table-column>
        <af-table-column prop="leader" label="联系人" align="left">
        </af-table-column>
        <af-table-column prop="phone" label="联系电话" align="left">
        </af-table-column>

        <af-table-column align="left" prop="regionDataList" label="省市区">
          <template slot-scope="scope">
            {{
              !scope.row.regionDataList
                ? ""
                : translateCodeToAddress(scope.row.regionDataList).toString()
            }}
          </template>
        </af-table-column>
        <af-table-column prop="detailRegionData" label="详情地址" align="left">
        </af-table-column>
        <af-table-column prop="stationLatitude" label="油站经度" align="left">
        </af-table-column>
        <af-table-column prop="stationLongitude" label="油站纬度" align="left">
        </af-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>

    <!-- 添加车队弹框 -->
    <el-dialog
      :title="'添加油品'"
      :visible.sync="teamCardOpen"
      width="800px"
      append-to-body
    >
      <el-table
        :data="selectTeamCardList"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionTeamCardChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="" label="车队名称" align="left">
        </el-table-column>
        <el-table-column prop="" label="主卡号" align="left"> </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import translateAddress from "@/utils/translateAddress.js";
import {
  addReductionActivity,
  getReductionActivity,
} from "@/api/market/reductionActivity";
import {
  getOilListByLogin,
  getStationList,
  addOil,
  upOil,
  delOil,
} from "@/api/dept";
export default {
  name: "Market_Reduction",
  data() {
    var validateStation = (rule, value, callback) => {
      if (this.selectStationList.length < 1) {
        callback(new Error("请选择油站"));
      } else {
        callback();
      }
    };
    var validateOilList = (rule, value, callback) => {
      if (this.selectOilList.length < 1) {
        callback(new Error("请选择参与活动的油品"));
      } else {
        callback();
      }
    };
    var validateStepTwoData = (rule, value, callback) => {
      if (this.stepTwoData.memberCondition == "part") {
        if (
          this.stepTwoData.memberLevel === "" &&
          this.stepTwoData.paymentMethod === "" &&
          this.stepTwoData.memberTags === ""
        ) {
          callback(new Error("请选择参与活动的车主"));
        }
      }
      callback();
    };
    return {
      daysOfMonth: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
      ],
      daysOfMonth2: [
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
      ],
      daysOfWeek: ["1", "2", "3", "4", "5", "6", "7"],
      fullUnit: { RFA: "元", LOR: "升", AAL: "元" },
      cutUnit: { FAD: "元", PAR: "%", RDD: "元" },
      activityUse: { CSP: "消费", RCH: "充值", LABEl: "标签" },
      activityType: { RFA: "按固定金额", LOR: "按固定升数", AAL: "每升立减" },
      activityMode: { FAD: "定额立减", PAR: "百分比立减", RDD: "随机立减" },
      oilList: [],
      stationList: [],
      selectStationList: [],
      selectOilList: [],
      rules: [{ full: "", cut: "", cutMin: "", cutMax: "" }],
      stepActive: 1,
      oilOpen: false,
      stationOpen: false,
      loading: false,
      stepOneData: {
        activityId: "",
        activityName: "",
        activityUse: "",
        activityType: "",
        activityMode: "",
      },
      stepOneRule: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        activityUse: [
          { required: true, message: "请选择活动用途", trigger: "blur" },
        ],
        activityType: [
          { required: true, message: "请选择活动类型", trigger: "blur" },
        ],
        activityMode: [
          { required: true, message: "请选择活动方式", trigger: "blur" },
        ],
      },
      stepTwoData: {
        oilPartOrAll: true,
        memberCondition: "all",
        memberLevel: "",
        paymentMethod: "",
        memberTags: "",
        isimm: "",
        startdate: "",
        enddate: "",
        maxCount: "",
      },
      stepTwoRules: {
        startdate: [
          { required: true, message: "选择开始时间", trigger: "change" },
        ],
        enddate: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        maxCount: [
          { required: true, message: "请填写最大参与次数", trigger: "change" },
        ],
        selectStationList: [
          { required: true, validator: validateStation, trigger: "change" },
        ],
        youplist: [
          { required: true, validator: validateOilList, trigger: "change" },
        ],
        stepTwoData: [
          { required: true, validator: validateStepTwoData, trigger: "change" },
        ],
      },
      stepThreeData: {
        timeModes: ["all"],
        onenum: 2,
        twonum: 2,
        activityRule: "1",
        antiCheating: "0",
        countOfDay: "9999",
        budget: "",
        days: [],
        weeks: [],
        cardFlag: "0",
        currentNum: 0,
      },
      stepThreeDataRules: {
        timeModes: [
          { required: true, message: "生效时段不能为空", trigger: "change" },
        ],
      },
      teamCardOpen: false,
      selectTeamCardList: [],
    };
  },
  computed: {},
  created() {
    this.getOilList();
    this.initData();
    console.log(this.$route.query.activeStatus);
  },
  methods: {
    changeTimeMode(val) {
      if (val.length === 0) {
        this.stepThreeData.weeks = [];
        this.stepThreeData.days = [];
      }
      if (!val.includes("week")) {
        this.stepThreeData.weeks = [];
      } else if (!val.includes("month")) {
        this.stepThreeData.days = [];
      }
    },
    initData() {
      var activityId = this.$route.query.activityId;
      if (activityId != null && activityId != "") {
        getReductionActivity(activityId).then((response) => {
          this.selectOilList = response.data.selectOilList;
          this.selectStationList = response.data.selectStationList;
          this.stepOneData.activityId =
            response.data.reductionActivity.activityId;
          this.stepOneData.activityName =
            response.data.reductionActivity.activityName;
          this.stepOneData.activityMode =
            response.data.reductionActivity.activityMode;
          this.stepOneData.activityType =
            response.data.reductionActivity.activityType;
          this.stepOneData.activityUse =
            response.data.reductionActivity.activityUse;
          this.stepOneData.activityUse =
            response.data.reductionActivity.activityUse;

          this.stepTwoData.oilPartOrAll =
            response.data.reductionActivity.oilPartOrAll;
          this.stepTwoData.memberCondition =
            response.data.reductionActivity.memberCondition;
          this.stepTwoData.memberLevel =
            response.data.reductionActivity.memberLevel;
          this.stepTwoData.paymentMethod =
            response.data.reductionActivity.paymentMethod;
          this.stepTwoData.memberTags =
            response.data.reductionActivity.memberTags;
          this.stepTwoData.startdate =
            response.data.reductionActivity.startDate;
          this.stepThreeData.budget = response.data.reductionActivity.budget;
          this.stepTwoData.enddate = response.data.reductionActivity.endDate;
          this.stepTwoData.maxCount = response.data.reductionActivity.maxCount;
          this.stepThreeData.activityRule =
            response.data.reductionActivity.activityRule;
          this.stepThreeData.antiCheating =
            response.data.reductionActivity.antiCheating;
          this.stepThreeData.countOfDay =
            response.data.reductionActivity.countOfDay;
          this.stepThreeData.timeModes =
            response.data.reductionActivity.timeModes;
          this.stepThreeData.cardFlag =
            response.data.reductionActivity.cardFlag;
          this.stepThreeData.days = response.data.reductionActivity.days
            ? response.data.reductionActivity.days.split(",")
            : [];
          this.stepThreeData.weeks = response.data.reductionActivity.weeks
            ? response.data.reductionActivity.weeks.split(",")
            : [];
          // this.stepThreeData.days = ['1','2'];
          if (response.data.reductionRulesList.length == 0) {
            this.rules = [
              { budget: "", full: "", cut: "", cutMin: "", cutMax: "" },
            ];
          } else {
            this.rules = response.data.reductionRulesList;
          }
          this.stepThreeData.activityRule =
            response.data.reductionActivity.activityRule;

          // this.form = response.data;
          // this.open = true;
          // this.title = "修改立减活动";
        });
      }
    },
    submitForm() {
      if (
        this.stepOneData.activityMode != "RDD" &&
        this.stepOneData.activityType != "AAL"
      ) {
        let isNull = null;
        this.selectOilList.forEach((item, index) => {
          if (isNull === false) return isNull;
          isNull = item.rules.every((rule) => {
            return rule.cut && rule.full;
          });
        });
        if (!isNull) {
          return this.$message.error("条件值不能为空！！！");
        }
      }
      this.$refs.ruleForm3.validate((valid) => {
        if (valid) {
          //拼接参数
          let formData = {};
          formData = JSON.parse(JSON.stringify(this.stepOneData));
          formData["oilPartOrAll"] = this.stepTwoData.oilPartOrAll;
          formData["selectStationList"] = this.selectStationList;
          formData["selectOilList"] = this.selectOilList;
          formData["oilPartOrAll"] = this.stepTwoData.oilPartOrAll;
          formData["memberCondition"] = this.stepTwoData.memberCondition;
          formData["memberLevel"] = this.stepTwoData.memberLevel;
          formData["paymentMethod"] = this.stepTwoData.paymentMethod;
          formData["memberTags"] = this.stepTwoData.memberTags;
          formData["startdate"] = this.stepTwoData.startdate;
          formData["enddate"] = this.stepTwoData.enddate;
          formData["maxCount"] = this.stepTwoData.maxCount;
          formData["activityRule"] = this.stepThreeData.activityRule;
          formData["antiCheating"] = this.stepThreeData.antiCheating;
          formData["countOfDay"] = this.stepThreeData.countOfDay;
          formData["budget"] = this.stepThreeData.budget;
          formData["rules"] = this.rules;
          formData["days"] = this.stepThreeData.days;
          formData["weeks"] = this.stepThreeData.weeks;
          formData["timeModes"] = this.stepThreeData.timeModes;
          formData["cardFlag"] = this.stepThreeData.cardFlag;
          console.log(formData);
          console.log(JSON.stringify(formData));
          addReductionActivity(formData).then((response) => {
            console.log(response);
            this.stepOneData.activityId = response.data;
            this.msgSuccess("保存成功");
            this.$router.push({
              path: "/market/reductionActivity",
              query: { refresh: true },
            });
          });
        }
      });
    },
    oneNextEvent() {
      this.$refs["ruleForm" + this.stepActive].validate((valid) => {
        if (valid) {
          this.stepActive++;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    abortEdit() {
      this.$confirm("是否确认关闭编辑页？").then((_) => {
        this.$store.state.tagsView.visitedViews.map((item, index) => {
          if (item.path === "/market/reduction_edit") {
            this.$store.state.tagsView.visitedViews.splice(index, 1);
          }
        });
        this.$router.replace({ path: "/market/reductionActivity" });
      });
    },
    delRowEvent(name, index) {
      this[name].splice(index, 1);
    },
    backPreEvent() {
      this.stepActive--;
    },
    getStartTime() {
      this.stepTwoData.startdate = this.formatter(
        new Date(),
        "yyyy-MM-dd hh:mm:ss"
      );
    },
    /**
     *
     * @param {n} n  模块key
     * @param {i} i 油品下标
     * @param {rulesIndex} rulrulesIndexes 每个油品条件的下标
     */
    addListEvent(n, i, rulesIndex) {
      if (this.stepOneData.activityMode != "RDD") {
        if (
          !this[n][i].rules[rulesIndex].full ||
          !this[n][i].rules[rulesIndex].cut
        ) {
          return this.$message.error("条件值不能为空！！！");
        }
        if (this[n][i].rules.length > 1) {
          this.currentNum = parseInt(this[n][i].rules[rulesIndex - 1].full);
          if (
            parseInt(this[n][i].rules[rulesIndex].full) <=
            parseInt(this[n][i].rules[rulesIndex - 1].full)
          ) {
            this[n][i].rules[rulesIndex].full = "";
            return this.$message.error(
              "当前满额不能小于或等于上一个条件！！！"
            );
          }
        }
      }
      this[n][i].rules.push({ full: "", cut: "", cutMin: "", cutMax: "" });
    },
    addRulesListEvent(n, i) {
      this[n][i].rules.push({ full: "", cut: "", cutMin: "", cutMax: "" });
    },
    reduceListEvent(n, i) {
      console.log(i);
      console.log(n);
      n.splice(i, 1);
    },
    getOilList() {
      this.loading = true;
      getOilListByLogin(this.oilQuery)
        .then((res) => {
          res.rows.forEach((item) => {
            item.rules = [{ full: "", cut: "", cutMin: "", cutMax: "" }];
          });
          this.oilList = res.rows;
        })
        .finally(() => (this.loading = false));
    },
    getStationList() {
      this.stationOpen = true;
      this.loading = true;
      this.stationQuery = {
        enterpriseId: this.presentEnterprise.enterpriseId,
      };
      if (this.$store.state.user.userLevel === "2") {
        this.stationQuery.stationId = this.$store.state.user.stationId;
      }
      getStationList(this.stationQuery)
        .then((res) => {
          this.stationList = res.rows;
        })
        .finally(() => (this.loading = false));
    },
    showOilOpen() {
      this.oilOpen = true;
      this.stepTwoData.oilPartOrAll = false;
      this.getOilList();
    },

    // 添加车队
    gotoAddTeam() {
      this.teamCardOpen = true;
      // 然后获取车队列表，
    },

    translateCodeToAddress(codeArr) {
      return translateAddress(codeArr);
    },
    handleSelectionOilChange(val) {
      this.selectOilList = val;
    },
    handleSelectionStationChange(val) {
      this.selectStationList = val;
    },
    // 车队选中行
    handleSelectionTeamCardChange(val) {
      this.selectTeamCardList = val;
    },
    formatter(thistime, fmt) {
      let $this = new Date(thistime);
      let o = {
        "M+": $this.getMonth() + 1,
        "d+": $this.getDate(),
        "h+": $this.getHours(),
        "m+": $this.getMinutes(),
        "s+": $this.getSeconds(),
        "q+": Math.floor(($this.getMonth() + 3) / 3),
        S: $this.getMilliseconds(),
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          ($this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    },
  },
};
</script>
<style lang="scss">
.redu_root {
  .alert-style {
    width: 50%;
    height: 40px;
    margin-left: 20px;
  }

  .disflx {
    display: flex;
  }

  .mt12 {
    margin-top: 12px;
  }

  .redu_title {
    height: 60px;
    font-size: 18px;
    line-height: 60px;
    font-weight: bold;
    background: #ccc;
    color: #000;
    text-indent: 30px;
  }

  .redu_step {
    width: 85%;
    margin: 24px auto;
  }

  .step_form {
    width: 85%;
    margin: 12px auto;

    .form-com-css {
      .el-form-item {
        padding: 20px;
        padding-left: 0;
        border: 1px solid #ccc;

        &.nolable {
          ::v-deep .el-form-item__content {
            margin-left: 20px !important;
          }
        }

        .one-alert {
          align-items: center;
        }
      }
    }

    &.step_two {
      .form-com-css {
        .el-form-item {
          padding: 0 24px;

          &.nolable {
            padding: 20px 0;
          }

          .t {
            &::before {
              content: "*";
              color: red;
              margin-right: 5px;
            }
          }

          .tableStyle {
            margin: 20px 0;

            ::v-deep table {
              thead tr th,
              tbody tr td {
                padding: 0;
                text-align: center;
                background: transparent;
              }

              tbody tr td {
                padding: 5px 0;
              }
            }
          }

          .date-css {
            margin-bottom: 15px;

            .el-input {
              width: 50%;
            }
          }
        }
      }
    }

    &.step_three {
      .form-com-css {
        .three-one {
          padding: 20px 0;

          .t-top-tip {
            margin-left: 30px;
            margin-top: 12px;

            p {
              margin-bottom: 0;

              i {
                font-style: normal;
                margin-left: 24px;
                color: #1890ff;
              }
            }
          }
        }

        .three-list {
          .row-bg {
            margin: 12px 0;
          }

          margin: 10px 0;
        }

        .oilNameDiv {
          justify-content: space-between;
        }

        .three-b {
          margin: 12px 0;
          align-items: center;

          .el-alert {
            margin-left: 0;
          }

          .el-input {
            width: 60%;
          }
        }
      }
    }
  }
}

.block {
  display: block;
}

.date-style .el-picker-panel__footer :nth-child(2) {
  color: #ffffff;
  background-color: #409eff;
  border-color: #409eff;
}

.br-sty :nth-of-type(18) .el-checkbox-button__inner {
  border-left: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
}
</style>
